<template>
	<div class="searchDeatilContainer">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/clueSearch' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>结果页</el-breadcrumb-item>
		</el-breadcrumb>
		<clueShow :id="id" :data="data" @update="update"></clueShow>
		<el-card shadow="hover" class="box-card" :body-style="{ padding: '20px' }">
			<div slot="header">
				<span>关联情报详情</span>
			</div>
			<!-- card body -->
			<el-table :data="tableData" border stripe>
				<el-table-column label="序号" width="120">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>

				<el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width"> </el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button type="text" :loading="btnLoading" size="small" @click="details(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<div v-if="isSingle">
			<clueSingle :tableData="signleData"></clueSingle>
		</div>
		<div v-else>
			<clueSingle :tableData="complexData"></clueSingle>
		</div>
	</div>
</template>

<script>
import clueShow from '@/components/clueShow'
import clueSingle from '@/components/clueSingle'
import clueComplex from '@/components/clueComplex'
export default {
	components: { clueShow, clueComplex, clueSingle },
	data() {
		return {
			data: {},
			loading: false,
			btnLoading: false,
			id: '',
			isSingle: true,
			tableData: [],
			signleData: [],
			complexData: [],
			columns: [
				{ label: '关联信息', id: 'value' },
				{ label: '类型', id: 'type' },
				{ label: '所属组织', id: 'apt_name' },
			],
		}
	},
	mounted() {
		this.id = this.$route.query.id ? this.$route.query.id : ''
		this.getClueDetails()
	},
	methods: {
		goBack() {
			this.$router.push(`/clueSearch`)
		},
		//历史记录 带 id
		getClueDetails() {
			this.$api.getClueDetail(this.id).then((res) => {
				if (res.status == '200') {
					this.data = res.data
					this.tableData = this.data.apt_list
					this.isSingle = this.data.apt_detail ? true : false
					this.signleData = this.data.apt_detail ? this.data.apt_detail : []
					this.complexData = this.data.apt_rate ? this.data.apt_rate : []
				} else {
					this.data = {}
				}
			})
		},
		//
		details(row) {
			// btnLoading
			let p = row.value
			this.btnLoading = true
			let json = {
				value: p,
			}
			this.$api
				.postSearch(json)
				.then((res) => {
					if (res.status === 200) {
						this.$message.success(res.data.msg)
					}
				})
				.finally(() => {
					this.btnLoading = false
				})
		},

		update(p) {
			this.id = p
			this.getClueDetails()
		},
	},
}
</script>
<style lang="less" scoped>
.searchDeatilContainer {
	padding: 15px;
}
</style>
